<template>
  <button @click="flag = !flag">switch</button>
  <transition
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__flash"
    :duration="{ enter: 2000, leave: 2000 }"
  >
    <div v-if="flag" class="box"></div>
  </transition>
</template>
<script setup lang="ts">

// 第三方动画样式库：animate.css
// 样式库，需要在发布时使用
// 安装 npm install animate.css -S
// 导入 animate.css 库
// 通过设置 active 过度的自定义类名为对应的样式名来实现动画样式设置
// 类名需要加前缀 animate__animated
// 使用了第三方组件库就不用自己设置动画，否则会产生冲突
// 使用了第三方动画库后，只需要设置静态样式以及 enter-active-class leave-active-class 类名
// 会自动按设置的进入类名动画切换到静态样式，按移除类名动画切换到消失
// 可以设置 :duration 自定义属性来控制动画时长，默认为总时长，可以通过配置对象来设置创建或销毁的时长

import { ref } from 'vue'
import 'animate.css'
const flag = ref<boolean>(false)
</script>
<style lang="less" scoped>
.box {
  background-color: red;
  height: 200px;
  width: 200px;
}
</style>
